<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(item,index) in names"
        :key="item+index"
        :label="item"
        :name="item"></el-tab-pane>
    </el-tabs>
    <component :is="activeName"></component>
  </div>
</template>

<script>
const req = require.context('./coms',false,/.*?\.(vue)$/);
const components = req.keys().map(i => req(i).default).reduce((a, i) => {
  return {
    ...a,
    [i.name]: i
  }
}, {})
const names = req.keys().map(i => req(i).default.name)
export default {
  name: "MuiPlayer",
  components,
  data(){
    return {
      names,
      activeName: names[0]
    }
  }
}
</script>

<style scoped lang="scss">

</style>
